<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <script src="/static/libs/jquery.min.js"></script>

    <style>
        .add-box{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: auto;
            position: relative;
            font-size: 12px;
            color: #888;
            text-align: center;
            line-height: 200px;
        }
        .add-box input{
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top:0;
            z-index:3;
        }
        .show-image{
            width: 100%;
            display: flex;
        }


        .image-list{
            flex: 1;
        }
        .image-list img{
            width: 100%;
        }

        #reviewImage{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top:0;
            z-index: 1;
        }
        .upload-status{
            position: absolute;
            width: 50%;
            height: 20%;
            left: 0;
            top:0;
            z-index: 2;
        }
    </style>
</head>
<body>

  <div class="add-box">
      <input type="file" id="file-upload" multiple>
      <span>点我上传图片</span>
      <image id="reviewImage" />
  </div>

  <div class="show-image">

  </div>

  <script>

      $(function () {
          $("#file-upload").on("change" , function ( e ) {
              var file = this.files[0];
              if(!file) return;
              var reader = new FileReader();
              reader.readAsDataURL(file);
              reader.onload = function (e) {
                  var base64 = e.target.result;
                  $("#reviewImage").attr("src" , base64);
              };
              var data = new FormData();
              for (var key in this.files) {
                  data.append("file", this.files[key]);
              }

              $.ajax({
                  type: 'put',
                  dataType: 'json',
                  url:'/',
                  data : data,
                  headers:{
                      Authorization:'CE3CA381E7675B4F61D6E316BA156131'
                  },
                  contentType: false,
                  processData: false,
                  success : function (data){
                      $(this).val("");
                      $(".show-image").text(data.data);
                  }.bind(this),
                  error:function(){

                  }
              });
          });

      });

  </script>


</body>
</html>